<template>
  <div class="resume-skills-form">
    <el-form
      ref="formRef"
      :model="formData"
      label-width="100px"
      @submit.prevent
    >
      <!-- 专业技能 -->
      <div class="skills-section">
        <div class="section-header">
          <h3 class="section-title">专业技能</h3>
        </div>
        <div class="skill-list">
          <div class="skill-tag-input">
            <el-form-item label="技能标签">
              <div class="tag-input-wrapper">
                <el-input
                  v-model="skillInput"
                  placeholder="添加技能标签，按回车确认"
                  @keyup.enter="addSkillTag"
                >
                  <template #append>
                    <el-button @click="addSkillTag">
                      添加
                    </el-button>
                  </template>
                </el-input>
              </div>
            </el-form-item>
          </div>
          
          <div class="skill-tags-preview">
            <template v-if="formData.skillTags.length > 0">
              <el-tag
                v-for="(tag, index) in formData.skillTags"
                :key="index"
                closable
                @close="removeSkillTag(index)"
                class="skill-tag"
              >
                {{ tag }}
              </el-tag>
            </template>
            <el-empty
              v-else
              description="暂无技能标签"
              :image-size="80"
            />
          </div>
        </div>
        
        <div class="skill-tips">
          <p>填写技能的小建议：</p>
          <ul>
            <li>添加与目标职位相关的核心技能</li>
            <li>包括技术工具、软件和专业技能</li>
            <li>突出您精通的领域</li>
          </ul>
        </div>
      </div>
      
      <!-- 证书 -->
      <div class="skills-section">
        <div class="section-header">
          <h3 class="section-title">证书</h3>
        </div>
        <div class="certificate-list">
          <div class="certificate-input">
            <el-form-item label="证书">
              <div class="tag-input-wrapper">
                <el-input
                  v-model="certificateInput"
                  placeholder="添加证书，按回车确认"
                  @keyup.enter="addCertificate"
                >
                  <template #append>
                    <el-button @click="addCertificate">
                      添加
                    </el-button>
                  </template>
                </el-input>
              </div>
            </el-form-item>
          </div>
          
          <div class="certificates-list">
            <template v-if="formData.certificates.length > 0">
              <div
                v-for="(certificate, index) in formData.certificates"
                :key="index"
                class="certificate-item"
              >
                <span class="certificate-name">{{ certificate }}</span>
                <el-button
                  type="danger"
                  link
                  @click="removeCertificate(index)"
                >
                  删除
                </el-button>
              </div>
            </template>
            <el-empty
              v-else
              description="暂无证书"
              :image-size="80"
            />
          </div>
        </div>
      </div>
      
      <!-- 语言能力 -->
      <div class="skills-section">
        <div class="section-header">
          <h3 class="section-title">语言能力</h3>
        </div>
        <div class="language-list">
          <div class="language-input">
            <el-form-item label="语言能力">
              <div class="tag-input-wrapper">
                <el-input
                  v-model="languageInput"
                  placeholder="例如：英语 - CET-6"
                  @keyup.enter="addLanguage"
                >
                  <template #append>
                    <el-button @click="addLanguage">
                      添加
                    </el-button>
                  </template>
                </el-input>
              </div>
            </el-form-item>
          </div>
          
          <div class="languages-list">
            <template v-if="formData.languages.length > 0">
              <div
                v-for="(language, index) in formData.languages"
                :key="index"
                class="language-item"
              >
                <span class="language-name">{{ language }}</span>
                <el-button
                  type="danger"
                  link
                  @click="removeLanguage(index)"
                >
                  删除
                </el-button>
              </div>
            </template>
            <el-empty
              v-else
              description="暂无语言能力"
              :image-size="80"
            />
          </div>
        </div>
        
        <div class="language-tips">
          <p>语言能力填写格式示例：</p>
          <ul>
            <li>英语 - CET-6</li>
            <li>日语 - N2</li>
            <li>法语 - 中级</li>
          </ul>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'

// 定义props
const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
    default: () => ({
      skillTags: [],
      certificates: [],
      languages: []
    })
  }
})

// 定义emit
const emit = defineEmits(['update:modelValue'])

// 表单ref
const formRef = ref(null)

// 输入框状态
const skillInput = ref('')
const certificateInput = ref('')
const languageInput = ref('')

// 表单数据（使用ref而不是computed）
const formData = ref({
  skillTags: [],
  certificates: [],
  languages: []
})

// 初始化表单数据
const initFormData = () => {
  formData.value = {
    skillTags: props.modelValue.skillTags || [],
    certificates: props.modelValue.certificates || [],
    languages: props.modelValue.languages || []
  }
}

// 监听props变化
watch(() => props.modelValue, (newValue) => {
  if (newValue) {
    initFormData()
  }
}, { immediate: true })

// 更新表单数据
const updateFormData = (value) => {
  emit('update:modelValue', value)
}

// 添加技能标签
const addSkillTag = () => {
  if (!skillInput.value.trim()) {
    ElMessage.warning('技能标签不能为空')
    return
  }
  
  const tag = skillInput.value.trim()
  
  // 检查是否重复
  if (formData.value.skillTags.includes(tag)) {
    ElMessage.warning('该技能标签已存在')
    return
  }
  
  // 更新数据
  const newData = {
    ...formData.value,
    skillTags: [...formData.value.skillTags, tag]
  }
  formData.value = newData
  updateFormData(newData)
  
  // 清空输入框
  skillInput.value = ''
}

// 删除技能标签
const removeSkillTag = (index) => {
  const newTags = [...formData.value.skillTags]
  newTags.splice(index, 1)
  
  const newData = {
    ...formData.value,
    skillTags: newTags
  }
  formData.value = newData
  updateFormData(newData)
}

// 添加证书
const addCertificate = () => {
  if (!certificateInput.value.trim()) {
    ElMessage.warning('证书不能为空')
    return
  }
  
  const certificate = certificateInput.value.trim()
  
  // 检查是否重复
  if (formData.value.certificates.includes(certificate)) {
    ElMessage.warning('该证书已存在')
    return
  }
  
  // 更新数据
  const newData = {
    ...formData.value,
    certificates: [...formData.value.certificates, certificate]
  }
  formData.value = newData
  updateFormData(newData)
  
  // 清空输入框
  certificateInput.value = ''
}

// 删除证书
const removeCertificate = (index) => {
  const newCertificates = [...formData.value.certificates]
  newCertificates.splice(index, 1)
  
  const newData = {
    ...formData.value,
    certificates: newCertificates
  }
  formData.value = newData
  updateFormData(newData)
}

// 添加语言能力
const addLanguage = () => {
  if (!languageInput.value.trim()) {
    ElMessage.warning('语言能力不能为空')
    return
  }
  
  const language = languageInput.value.trim()
  
  // 检查是否重复
  if (formData.value.languages.includes(language)) {
    ElMessage.warning('该语言能力已存在')
    return
  }
  
  // 更新数据
  const newData = {
    ...formData.value,
    languages: [...formData.value.languages, language]
  }
  formData.value = newData
  updateFormData(newData)
  
  // 清空输入框
  languageInput.value = ''
}

// 删除语言能力
const removeLanguage = (index) => {
  const newLanguages = [...formData.value.languages]
  newLanguages.splice(index, 1)
  
  const newData = {
    ...formData.value,
    languages: newLanguages
  }
  formData.value = newData
  updateFormData(newData)
}

// 验证表单
const validate = () => {
  return true // 此表单没有必填项，始终返回 true
}

// 暴露方法给父组件
defineExpose({
  validate
})
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.css';

.resume-skills-form {
  .skills-section {
    background: var(--color-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);

    &:last-child {
      margin-bottom: 0;
    }

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--spacing-md);

      .section-title {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
      }
    }

    .skill-list {
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-sm);
      margin-bottom: var(--spacing-md);

      .skill-tag {
        background: var(--color-background);
        color: var(--text-primary);
        padding: var(--spacing-xs) var(--spacing-sm);
        border-radius: var(--border-radius-sm);
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);

        .delete-icon {
          cursor: pointer;
          color: var(--text-secondary);
          
          &:hover {
            color: var(--color-danger);
          }
        }
      }
    }

    .skill-input {
      display: flex;
      gap: var(--spacing-sm);
      margin-bottom: var(--spacing-md);

      .el-input {
        flex: 1;
      }
    }

    .skill-tips {
      color: var(--text-secondary);
      font-size: var(--font-size-sm);
      line-height: var(--line-height-normal);
      padding: var(--spacing-sm);
      background: var(--color-background);
      border-radius: var(--border-radius-sm);
      margin-top: var(--spacing-sm);

      ul {
        margin: var(--spacing-xs) 0 0;
        padding-left: var(--spacing-lg);

        li {
          margin-bottom: var(--spacing-xs);

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }

  .certificate-list {
    .certificate-item {
      display: flex;
      align-items: center;
      gap: var(--spacing-md);
      margin-bottom: var(--spacing-sm);
      padding: var(--spacing-sm);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-sm);

      &:last-child {
        margin-bottom: 0;
      }

      .certificate-info {
        flex: 1;

        .name {
          font-weight: 500;
          color: var(--text-primary);
          margin-bottom: var(--spacing-xs);
        }

        .date {
          font-size: var(--font-size-sm);
          color: var(--text-secondary);
        }
      }
    }
  }

  .language-list {
    .language-item {
      display: flex;
      align-items: center;
      gap: var(--spacing-md);
      margin-bottom: var(--spacing-sm);

      &:last-child {
        margin-bottom: 0;
      }

      .el-input {
        flex: 1;
      }

      .el-select {
        width: 120px;
      }
    }
  }

  .language-tips {
    margin-top: var(--spacing-sm);
    background-color: var(--color-background);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-sm);
    
    p {
      color: var(--text-secondary);
      margin: 0 0 var(--spacing-xs);
      font-size: var(--font-size-sm);
      font-weight: 600;
    }
    
    ul {
      margin: 0;
      padding-left: var(--spacing-lg);
      color: var(--text-secondary);
      font-size: var(--font-size-sm);
      
      li {
        margin-bottom: var(--spacing-xs);
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  @media (max-width: 768px) {
    .skills-section {
      padding: var(--spacing-md);
    }

    .certificate-item,
    .language-item {
      flex-direction: column;
      align-items: stretch;
      gap: var(--spacing-sm);

      .el-button {
        width: 100%;
      }
    }
  }
}
</style> 